.weekly {
  height: 100%;
  padding: 16px;
  font-size: 16px;

  .wrapper {
    height: 100%;
    background-color: #ffffffad;
    border-radius: 16px;
    margin: 0 auto;
    position: relative;

    .summary {
      position: absolute;
      right: 32px;
      top: 32px;
      cursor: pointer;

      .tips {
        color: #f22;
        font-size: 11px;
        align-self: flex-end;
        cursor: default;
        letter-spacing: 1px;
      }

      img {
        width: 32px;
        height: 32px;
      }
    }

    .title {
      font-size: 60px;
      padding: 16px 0 0 36px;
    }

    .date-picker {
      .date-text {
        color: @shallow-text-color;
      }
    }

    .content-wrap {
      flex: 1;
      padding-bottom: 36px;
      box-sizing: border-box;
      overflow: hidden;

      .add-weekly-task {
        width: 25%;

        .tips {
          letter-spacing: 1px;
          line-height: 21px;

          &-label {
            color: @danger-color;
          }
        }

        .todo-list {
          flex: 1;
          overflow-y: hidden;
          padding: 10px 25px;
          border-radius: 24px;
          border: 1px solid #00a3a6;
          box-shadow: 0 0 5px #ccc7c7;

          .item-wrap {
            flex: 1;
            max-height: 600px;
            overflow-y: auto;

            .content-progress {
              .progress {
                margin-left: 16px;
                padding: 16px 16px 0 0;
              }
            }

            .todo-item {
              :deep(.ant-checkbox-wrapper) {
                .ant-checkbox {
                  align-self: flex-start;
                  margin-top: 4px;
                  color: #aaa9a9 !important;
                }
              }

              img {
                width: 16px;
                height: 16px;
                margin-top: 4px;
              }

              &.finish {
                .label {
                  text-decoration: line-through;
                  transition: all 0.5s;
                }
              }

              .label {
                word-break: break-all;
              }
            }
          }

          .empty {
            flex: 1;
            padding-bottom: 36px;
            letter-spacing: 1px;
            font-size: 24px;
            justify-content: center;
            align-items: center;

            .reference {
              font-size: 14px;
              color: @shallow-text-color;
            }
          }
        }
      }

      .echarts-wrapper {
        flex: 1;
        margin-left: 100px;
        padding-right: 50px;

        .echarts-title {
          justify-content: center;
          position: relative;

          .text {
            font-weight: bold;
            font-size: 18px;
          }

          a {
            position: absolute;
            right: 0;
          }
        }

        .echarts-slot {
          flex: 1;
          border: 1px dashed @border-color;
        }
      }
    }
  }
}

.ant-modal-content {
  .unfinished-detail {
    .wrapper {
      flex-wrap: wrap;

      .unfinished-item {
        border: 1px dashed @border-color;
        flex: 1;
        min-width: 20%;
        max-width: 20%;
        min-height: 140px;
        border-radius: 8px;
        font-size: 16px;

        .date {
          border-bottom: 1px solid @main-color;
        }

        .todo-item {
          font-size: 14px;

          :deep(.ant-checkbox-wrapper) {
            width: 100%;

            .ant-checkbox {
              align-self: flex-start;
              margin-top: 4px;
            }
          }

          .label {
            max-width: 100px;

            &-text {
              width: 100%;
            }
          }

          &.finish {
            .label {
              text-decoration: line-through;
              transition: all 0.5s;
            }
          }
        }

        .finished {
          color: #00a3a6;
          font-size: 13px;
        }
      }
    }
  }

  .top-list {
    min-height: 500px;

    &-item {
      position: relative;
      letter-spacing: 0.5px;
      padding-right: 60px;

      .anticon-minus {
        position: absolute;
        right: 0;
        top: 20px;
      }
    }
  }
}

.drawer-wrap {
  overflow-y: hidden;
  height: 100%;

  .label {
    font-weight: bold;
    font-size: 15px;

    .desc {
      font-weight: normal;
      font-size: 12px;
      color: @shallow-text-color;
    }
  }

  .img-wrap {
    max-height: 400px;
    overflow-y: auto;

    .img-list {
      flex-wrap: wrap;

      .img-item {
        border: 1px dashed #999;
        width: 120px;
        height: 120px;

        :deep(.ant-image) {
          width: 100%;
          height: 100%;

          &-img {
            height: 100%;
          }
        }
      }

      .upload-label {
        font-size: 14px;
        color: #333;
        border: 1px dashed #999;
        width: 120px;
        height: 120px;
        font-size: 36px;

        &:hover {
          opacity: 0.7;
          cursor: pointer;
        }
      }

      .file-upload {
        font-size: 0; // 隐藏按钮的文字
        height: 24px;
        width: 100%;
        display: none;

        &::file-selector-button {
          height: 24px;
          font-size: 14px;
          color: #333;
          text-align: left;
          font-size: 14px;
          background-color: #fff;
          border: none;
          width: 100%;

          &:hover {
            opacity: 0.7;
            cursor: pointer;
            color: #6d9bfc;
            background-color: #f4f6fa;
          }
        }
      }
    }
  }

  .text-wrap {
    flex: 1;
    overflow-y: auto;

    .text {
      text-indent: 16px;
      cursor: pointer;
      word-break: break-all;
      letter-spacing: 1px;
    }
  }
}
